<template>
  <div class="film-list" v-infinite-scroll="loadMore">
    <FilmItem v-for="item in filmList" :key="item.filmId" :filmInfo="item" filmType="nowPlaying">
    </FilmItem>
    <div class="film-list__loadmore" v-show="loading">
      <mt-spinner type="fading-circle"></mt-spinner>
      <span>加载中...</span>
    </div>

    <div class="film-list__loadmore" v-show="noMore">
      <span>别拉了，到底了...</span>
    </div>
  </div>
</template>

<script>
import FilmItem from '../../components/FilmItem'
import { Spinner } from 'mint-ui'
import { getBannerList2 } from '@/api/film'
export default {
  name: 'NowPlaying',
  components: {
    FilmItem,
    [Spinner.name]: Spinner
  },
  data () {
    return {
      total: 0,
      filmList: [],
      loading: false,
      noMore: false,
      pageNum: 0,
      pageSize: 10,
      totalPages: 1
    }
  },
  methods: {
    /**
     * 加载更多
     */
    loadMore () {
      if (this.pageNum >= this.totalPages) {
        this.noMore = true
        return
      }
      this.loading = true
      this.pageNum++
      setTimeout(() => {
        getBannerList2({
          cityId: 440300,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          type: 1,
          k: 6236088
        }).then(response => {
          let res = response.data
          if (res.status === 0) {
            this.filmList = [...this.filmList, ...res.data.films]
            this.totalPages = Math.ceil(res.data.total / this.pageSize)
            this.loading = false
          }
        })
      }, 100)
    }
  }
}
</script>

<style lang="scss">
@import './film-list.scss';
</style>
